<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>shadowAnimation</title>
  <style>
    .shadow {
      position: relative;
      width: 250px;
      height: 250px;
      border: 1px solid rgb(26, 18, 18);
      box-sizing: border-box;
      margin: 0 auto;
      float: left;
      overflow: hidden;
    }

    .shadow::before {
      content: "";
      position: absolute;
      width: 50px;
      height: 50px;
      top: -50px;
      left: -50px;
      box-shadow: 50px 50px blue, 150px 50px red, 250px 50px pink,
        50px 100px, 150px 100px, 250px 100px,
        50px 150px, 150px 150px, 250px 150px,
        50px 200px, 150px 200px, 250px 200px,
        50px 250px, 150px 250px, 250px 250px;
      animation: move 3s infinite linear;
    }

    @keyframes move {
      25% {
        transform: translate(50px);
        color: coral;
        box-shadow: 50px 50px blue, 150px 50px red, 250px 50px pink,
          50px 100px, 150px 100px, 250px 100px,
          50px 150px, 150px 150px, 250px 150px,
          50px 200px, 150px 200px, 250px 200px,
          50px 250px, 150px 250px, 250px 250px;
      }

      50% {
        transform: translate(0px);
        color: brown;
        border-radius: 0;
        box-shadow: 50px 50px, 150px 50px, 250px 50px,
          100px 100px, 200px 100px, 300px 100px,
          50px 150px, 150px 150px, 250px 150px,
          100px 200px, 200px 200px, 300px 200px,
          50px 250px, 150px 250px, 250px 250px;
      }

      75% {
        transform: translate(0px);
        color: teal;
        border-radius: 50%;
        box-shadow: 50px 50px, 150px 50px, 250px 50px,
          100px 100px, 200px 100px, 300px 100px,
          50px 150px, 150px 150px, 250px 150px,
          100px 200px, 200px 200px, 300px 200px,
          50px 250px, 150px 250px, 250px 250px;
      }

      100% {
        border-radius: 0%;
        box-shadow: 50px 50px, 150px 50px, 250px 50px,
          50px 100px, 150px 100px, 250px 100px,
          50px 150px, 150px 150px, 250px 150px,
          50px 200px, 150px 200px, 250px 200px,
          50px 250px, 150px 250px, 250px 250px;
      }
    }

    .container {
      width: 200px;
      height: 200px;
      background-color: green;
      border: 1px solid #000;
      color: red;
      border: inset;
      border-radius: 50%;
      box-shadow: 100px 100px 0 0 yellow inset;
    }

    div.divbox {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin-top: 20px;
      border-radius: 50%;
      box-shadow: 0 0 2px 10px red inset;
    }

    ul::after {
      content: "";
      clear: both;
      display: block;
    }

    li {
      list-style: none;
      float: left;
    }

    li>img {
      width: 300px;
      margin: 0 40px;
    }

    /*通用类*/
    body {
      font-family: Arial;
      font-size: 20px;
    }

    body,
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .wrap {
      width: 70%;
      height: 200px;
      margin: 50px auto;
      background: #fff;
    }

    .wrap h1 {
      font-size: 20px;
      text-align: center;
      line-height: 200px;
    }

    /*弧度阴影*/
    .effect {
      position: relative;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(0, 0, 0, 0.1) inset;
      /*添加一个范围=4px的小阴影;再添加一个范围=10px的内阴影;*/
    }

    .effect:before,
    .effect:after {
      content: '';
      background: #f00;
      position: absolute;
      z-index: -2;
      top: 50%;
      bottom: 0;
      left: 30px;
      right: 30px;
      /*设置四个方向值,然后浏览器自动计算盒子的大小;*/
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
      /*设置添加的盒子的阴影;*/
      border-radius: 100px/10px;
      /*添加圆角:水平方向圆角大小是100px/垂直方向圆角大小是10px;*/
    }

    /*翘边阴影*/
    .box {
      width: 1020px;
      height: auto;
      clear: both;
      overflow: hidden;
      margin: 20px auto;
    }

    .box li {
      position: relative;
      /*以li为定位基准;*/
      /* width: 300px;
      height: 210px; */
      float: left;
      background: #fff;
      margin: 20px 10px;
      border: 2px solid #efefef;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.27);
      /*给li添加一个小小的阴影;*/
    }

    .box li img {
      display: block;
      width: 300px;
      margin: 5px;
    }

    .box li:before {
      content: '';
      position: absolute;
      z-index: -3;
      width: 90%;
      height: 94%;
      left: 16px;
      bottom: 9px;
      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.6);
      transform: skew(-9deg) rotate(-5deg);
      /*图形向右倾斜12度;并逆时针旋转4度;*/
    }

    .box li:after {
      content: '';
      position: absolute;
      z-index: -4;
      width: 90%;
      height: 90%;
      right: 16px;
      bottom: 21px;
      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
      transform: skew(14deg) rotate(10deg);
      /*图形向左倾斜12度;并顺时针旋转4度;*/
    }


    p {
      color: #fff907;
      padding: 100px;
      margin: 0;
      font: 100px "隶书";
      text-shadow: 0px 0px 0px #e2d83c,
        1px 1px 0px #e2d83c,
        2px 2px 0px #e2d83c,
        3px 3px 0px #e2d83c,
        4px 4px 0px #e2d83c,
        5px 5px 0px #e2d83c,
        6px 6px 0px #e2d83c,
        7px 7px 0px #e2d83c,
        8px 8px 0px #e2d83c,
        9px 9px 0px #e2d83c,
        10px 10px 0px #e2d83c,
        11px 11px 0px #e2d83c,
        12px 12px 0px #e2d83c,
        10px 5px 30px #e4e2ba;
      transform: skew(10deg, 5deg);

    }
  </style>
</head>

<body>
  <div class="shadow"></div>
  <a href="https://gitee.com/MaDong001/demos" target="_blank" style="margin: 20px;">
    <img src="./box-shadow.jpg" alt="">
  </a>


  <div class="container"></div>

  <div class="divbox"></div>

  <div class="wrap effect">
    <!-- effect类:是阴影类,其他元素也可以使用 -->
    <h1>Shadow Effect</h1>
  </div>
  <ul class="box">
    <li><img src="./1.jpg" alt=""></li>
    <li><img src="./2.jpg" alt=""></li>
    <li><img src="./3.jpg" alt=""></li>
  </ul>

  <p class="p1 font2" id="effect2">立体字</p>
</body>

</html>